<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-12 09:15:49
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2023-11-24 15:23:44
 * @FilePath: \jzjypc4.0\src\views\ResourceCenter\beikeziyuan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 教研课页 -->
  <div id="container">
    <div class="top">
      <div class="bread">
        <span>当前位置：</span>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="isSearch">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: routeurl }" v-if="!isSearch">{{routeNmae}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: fromPath}" v-if="bigTapName">{{ bigTapName }}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: jxkurl}" v-if="jxkFlTitle">{{ jxkFlTitle }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="beikeziyuan">
        <div class="beike">
          <img src="../../assets/img/ziyuan.png" />
          <div class="details">
            <div class="title">
              <span>推荐</span>
              <h3>{{ title }}</h3>
            </div>
            <div class="msg">
              <p v-html="sub_title"></p>
              <div class="bottom">
                <span class="upTime" v-show="update_time !=0"
                  >更新于{{ timeStamp2String(update_time * 1000, 2) }}</span
                >
                <span class="upTime" v-show="update_time ==0"
                  >更新于{{ timeStamp2String(create_time * 1000, 2) }}</span
                >
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ view_nums }}</span
                >
                <span class="recNum"
                  >共<a>{{ kejian_nums }}</a
                  >份资源</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title topTitle">
        <p>包内资源</p>
        <span>{{kejian_nums}}份</span>
      </div>
      <div class="box">
        <div class="left">
          <!-- 全选按钮 -->
          <!-- <el-checkbox
            v-model="checkAll"
            @change="allClassChose"
            class="quanxuan"
          >
            全选
          </el-checkbox> -->
          <el-checkbox-group v-model="checkedClassArr" @change="classChose">
            <el-collapse v-model="activeNames" @change="changeClass">
              <el-collapse-item
                :name="item.id"
                v-for="item in classList"
                :key="item.id"
              >
                <template slot="title">
                  <p class="jiaoyanClass">{{ item.title }}</p>
                  <span v-show="classArr.indexOf('1') == 0">收起</span>
                  <span v-show="classArr.indexOf('1') == -1">展开</span>
                </template>

                <div class="srcollBox">
                  <div class="jybox" v-for="list in item.lists" :key="list.id">
                    <!-- <el-checkbox :label="list"> -->
                      <div class="el-checkbox">
                      <img
                        :src="list.fm_file_url"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 100px"
                        v-if="item.type_id == 1"
                      />
                      <img
                        src="../../assets/img/resFile (1).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'ppt') ||
                          (item.type_id == 2 && list.suffix == 'pps') ||
                          (item.type_id == 2 && list.suffix == 'ppsx') ||
                          (item.type_id == 2 && list.suffix == 'pptx')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (2).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'mp4') ||
                          (item.type_id == 2 && list.suffix == 'rm')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (3).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'xls') ||
                          (item.type_id == 2 && list.suffix == 'xlsx')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (4).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'zip') ||
                          (item.type_id == 2 && list.suffix == 'rar')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (5).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'm4a') ||
                          (item.type_id == 2 && list.suffix == 'mp3')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (6).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'doc') ||
                          (item.type_id == 2 && list.suffix == 'docx')
                        "
                      />
                      <img
                        src="../../assets/img/resFile (7).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="item.type_id == 2 && list.suffix == 'pdf'"
                      />
                      <img
                        src="../../assets/img/resFile (8).png"
                        alt=""
                        class="jiaoyankekjfl"
                        style="width: 50px"
                        v-if="
                          (item.type_id == 2 && list.suffix == 'png') ||
                          (item.type_id == 2 && list.suffix == 'jpg')
                        "
                      />
                      <div
                        class="msg"
                        @click.prevent="
                          choderightContent(list.row_id, item.type_id)
                        "
                      >
                        <p :class="{ choseFile: downId == list.row_id }">
                          {{ list.title }}
                        </p>
                        <span>{{ list.name }}</span>
                      </div>
                    </div>
                    <!-- </el-checkbox> -->
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </el-checkbox-group>
        </div>
        <div class="right">
          <!-- <button @click="ceshi">ceshi</button> -->
          <div class="showRes">
            <div
              class="videoBox"
              v-if="rightType == 1"
              @contextmenu.prevent="menuPlayer()"
            >
              <video
                class="video"
                :src="video_path"
                height="448px"
                width="800px"
                type="video/mp4"
                controlsList="nodownload"
                :poster="file_url"
                controls="controls"
                loop="-1"
                preload
                ref="startvideo"
              ></video>
              <div class="cover" v-if="playFlag"></div>
              <span @click="startvideo" v-if="playFlag"
                ><img src="../../assets/img/play.png"
              /></span>
            </div>
            <div class="kejianPic" v-if="rightType == 2">
              <div class="pic" v-for="item in picList" :key="item.id">
                <img :src="item.file_url" alt="" style="width: 800px" />
              </div>
            </div>
          </div>
          <!-- <div class="down"></div> -->
          <div class="downlond" v-if="rightType == 2">
            <span>{{ title }}</span>
            <div class="downFile" @click="downLoad">下载资源</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="guanggao">
      <img src="" alt="" />
      广告图
    </div> -->
  </div>
</template>
<script>
import {
  info_jyjxk,
  info_videos,
  info_kejian,
  url_kejian,
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
export default {
  inject: ["reload"], //刷新页面
  components: {},
  data() {
    return {
      timeStamp2String,
      title: "", //标题
      update_time: "", //更新时间
      create_time:'',//创建时间
      kejian_nums: 0, //课件数量
      video_nums: 0, //视频数量
      view_nums: 0, //查看次数
      sub_title: "", //简介
      activeNames: [],
      jyboxid: 0, //选择的教研课的分类
      playFlag: true,
      file_url: "", //视频封面
      video_path: "", //视频地址
      classList: [], //汇总的课件分类表
      classList1: [], //教研课内容
      classList2: [], //教研课件内容
      jyclass: [], //教研课的选择框
      jykj: [], //教研课件的选择框
      checkAll: false, //是否全选
      checkedClassArr: [], //已选课件
      isIndeterminate: true, //全选
      classArr: [], //折叠面板数组
      rightType: 1, //右侧要展示的内容类型
      picList: [], //右侧展示的图片列表
      isAudio: false, //是否为音频
      downId: "", //单个文件下载id

      

      //是否是搜索页跳转来的
      isSearch:false,

      routeurl:'',//路径
      routeNmae:'',//路径名
      bigTapName:'',//同步资源页大菜单名
      fromPath:'',//同步资源地址
      jxkFlTitle:'',//教学课分类名
      jxkurl:'',//教学课分类地址
    };
  },
  created() {
    console.log(this.$route.query);
    // 回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    //是否是搜索页跳转来的
    if(this.$route.query.path == '/' || this.$route.query.path == "/resourceJx" || this.$route.query.isSearch){
      localStorage.setItem('path',this.$route.query.path)
      this.routeNmae = this.$route.query.routeName
      this.routeurl = this.$route.query.path
      this.$emit("pathpath", this.routeurl);
      this.isSearch = 1
    }else if(this.$route.query.bigTap){
      localStorage.setItem('path',this.$route.query.path)
      this.routeNmae = this.$route.query.routeName
      this.routeurl = this.$route.query.path
      this.$emit("pathpath", this.routeurl);
      this.bigTapName = this.$route.query.bigTapName
      this.jxkFlTitle = this.$route.query.jxkFlTitle
      this.fromPath = this.$route.query.path?this.$route.query.path+'?from=res'+'&bigTap='+this.$route.query.bigTap+'&page='+this.$route.query.page +'&pageSize='+this.$route.query.pageSize :""; //跳转过来的页面路径
      this.jxkurl = this.fromPath+'&jxkFlId='+this.$route.query.jxkFlId; //跳转过来的页面路径
    }
    info_jyjxk({
      md5key: localStorage.getItem("md5key"),
      id: this.$route.query.id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res);
        const data = res.retRes;
        this.title = data.title;
        this.update_time = data.update_time;
        this.create_time = data.create_time;
        this.kejian_nums = data.kejian_nums;
        this.video_nums = data.video_nums;
        this.view_nums = data.view_nums;
        this.sub_title = data.sub_title;
        this.classList1 = data.tags_lists; //教研课内容
        this.classList2 = data.tags_lists2; //校验课件内容
        this.classList1.forEach((item) => {
          this.classList.push(item);
          this.jyclass.push(...item.lists);
        });
        this.classList2.forEach((item) => {
          this.jykj.push(...item.lists);
          this.classList.push(item);
        });
        console.log(this.classList, "12133");
        this.downId = this.classList[0].lists[0].row_id;
        //默认展开第一个分类，选中第一个视频
        this.activeNames.push(this.classList[0].id);
        //获取进入教研课页的第一个视频链接
        // 获取视频信息
        info_videos({
          md5key: localStorage.getItem("md5key"),
          id: this.classList[0].lists[0].row_id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "进入教研课页的第一个视频链接");
            this.file_url = res.retRes.fm_file_url;
            this.video_path = res.retRes.video_file_url;
          } else {
            this.$message(res.retErr);
          }
        });
      } else {
        this.$message(res.retErr);
      }
    });
  },
  mounted() {
    //监听滚动
    window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    // ceshi(){
    //   this.$refs.startvideo.requestPictureInPicture()
    //   this.$refs.startvideo.play()
    //   console.log(this.$refs.startvideo,123)
    // },
    //视频禁止右键
    menuPlayer() {
      console.log(123);
    },
    //置顶
    handleScrollY() {
      if (this.rightType == 2) {
        const downlond = document.getElementsByClassName("downlond")[0]; //下载模块
        const beikeziyuan = document.getElementsByClassName("beikeziyuan")[0]; //顶部备课包
        // const guanggao = document.getElementsByClassName("guanggao")[0]; //底部广告
        const left = document.getElementsByClassName("left")[0]; //左侧需要置顶的列表
        const content = document.getElementsByClassName("content")[0];
        const right = document.getElementsByClassName("right")[0];
        console.log(content.getBoundingClientRect().top);
        if (beikeziyuan.getBoundingClientRect().top < 150) {
          downlond.style.position = "fixed";
          downlond.style.bottom = "0px";
          // left.style.position = "fixed";
        }
        if (content.getBoundingClientRect().top <= 50) {
          left.style.position = "fixed";
          left.style.top = "80px";
          right.style.marginLeft = "400px";
        } else if (content.getBoundingClientRect().top > 51) {
          left.style.position = "static";
          right.style.marginLeft = "0px";
        }
      } else {
        console.log("视频不可下载");
      }
    },
    //播放按钮
    startvideo() {
      // console.log(this.$refs.startvideo);
      this.$refs.startvideo.play();
      this.playFlag = false;
      // if (this.$refs.startvideo.paused) {
      //   this.$refs.startvideo.play();
      // } else {
      //   this.$refs.startvideo.pause();
      // }
    },
    //展开收起课件列表
    changeClass(val) {
      // console.log(val);
      // this.classArr = val;
      const srcollBox = document.getElementsByClassName("srcollBox")[0];
      console.log(srcollBox.scrollHeight);
      srcollBox.scrollTop = 0;
    },
    //全选按钮
    allClassChose(e) {
      console.log(e);
      if (e == true) {
        this.checkedClassArr = this.jyclass.concat(this.jykj);
        console.log(this.checkedClassArr);
      } else {
        this.checkedClassArr = [];
      }
    },
    //按钮列表
    classChose(e) {
      // console.log(e);
      if (
        this.checkedClassArr.length >= this.jyclass.concat(this.jykj).length
      ) {
        this.checkAll = true;
      } else {
        this.checkAll = false;
      }
      // console.log(this.checkedClassArr)
    },
    //点击要查看的教研课或者课件
    choderightContent(id, type_id) {
      console.log(id, type_id);
      const topHeight =
        document.getElementsByClassName("beikeziyuan")[0].offsetHeight;
      console.log(topHeight, "顶部高度顶部高度");
      //点击后回到顶部
      $(document).ready(function () {
        $(window).scrollTop(topHeight + 84);
      });
      this.downId = id;
      // 如果选择的是教研课
      if (type_id == 1) {
        const left = document.getElementsByClassName("left")[0]; //左侧需要置顶的列表
        const right = document.getElementsByClassName("right")[0];
        left.style.position = "static";
        right.style.marginLeft = "0px";
        this.rightType = 1; //把右侧内容改为视频类型
        this.video_path = "";
        // 获取视频信息
        info_videos({
          md5key: localStorage.getItem("md5key"),
          id: id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "视频信息");
            this.file_url = res.retRes.fm_file_url;
            this.video_path = res.retRes.video_file_url;
            this.playFlag = true;
          } else {
            this.$message(res.retErr);
          }
        });
        // 如果选择的是课件类
      } else if (type_id == 2) {
        // const left = document.getElementsByClassName("left")[0]; //左侧需要置顶的列表
        // left.style.position = "fixed";

        this.rightType = 2; //把右侧内容改成课件内类
        //获取课件详情
        info_kejian({
          md5key: localStorage.getItem("md5key"),
          id: id,
        }).then((res) => {
          if (res.retInt == 1) {
            console.log(res, "课件信息");
            if (res.retRes.suffix == "mp3" || res.retRes.suffix == "m4a") {
              this.isAudio = true;
            } else {
              this.picList = res.retRes.file_lists;
            }
          } else {
            this.$message(res.retErr);
          }
        });
      }
    },
    //获取文件下载链接
    downLoad() {
      url_kejian({
        id: this.downId,
      }).then((res) => {
        console.log(res);
        // window.open(res.retRes.download_file_url, "_blank");
        if (res.retInt == 1) {
          let url = res.retRes.download_file_url;
          const a = document.createElement("a");
          a.href = url;
          a.download = res.retRes.title;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
        }
      });
    },
  },
};
</script>

<style>
/* 面包屑 */
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link:hover {
  color: #08a579;
}
.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  font-weight: normal;
  color: #626366;
}
.el-breadcrumb__separator {
  color: #626366;
}
</style>
<style lang="less" scoped>
#container {
  width: 100%;
  background-color: #f0f0f5;
  overflow: hidden;
  .top {
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .bread {
      display: flex;
      margin: 20px auto;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #626366;
      line-height: 24px;
      .el-breadcrumb {
        font-size: 14px;
        line-height: 24px;
        /deep/.el-breadcrumb__item:last-child {
          .el-breadcrumb__inner {
            color: #08a579;
            white-space: wrap;

            p {
              width: 350px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .beikeziyuan {
      .beike {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        width: 1200px;
        // height: 150px;
        background-color: #fff;
        img {
          margin: 0px 25px 0 25px;
          width: 64px;
          height: 64px;
        }
        .details {
          width: 800px;
          padding-top: 20px;
          .title {
            display: flex;
            margin: 0;
            margin-bottom: 16px;
            span {
              display: inline-block;
              position: relative;
              top: 2px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              color: #ffffff;
              line-height: 20px;
              text-align: center;
            }
            h3 {
              margin-left: 10px;
              // margin-top: 22px;
              width: 800px;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: #333333;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          .msg {
            padding: 0;
            // width: 700px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            color: #626366;
            p {
              min-height: 20px;
              margin-bottom: 5px;
            }
            .bottom {
              margin-bottom: 15px;
              margin-top: 15px;
              color: #939599;
              font-size: 12px;
              font-family: Microsoft YaHei;
              .upTime {
                margin-right: 29px;
              }
              .seeNum {
                margin-right: 30px;
                i {
                  margin-right: 5px;
                }
              }
              .recNum {
                a {
                  color: red;
                }
              }
            }
          }
        }
        // .seeAll {
        //   margin-top: 50px;
        //   padding-left: 80px;
        //   height: 110px;
        //   border-left: 1px solid #e6e6e6;
        //   cursor: pointer;
        //   span {
        //     display: inline-block;
        //     margin-top: 30px;

        //     text-align: center;
        //     width: 120px;
        //     height: 40px;
        //     background: #08a579;
        //     border-radius: 4px;
        //     color: #ffffff;
        //     font-family: Microsoft YaHei;
        //     font-size: 16px;
        //     line-height: 40px;
        //   }
        // }
      }
    }
  }
  .content {
    margin: 0 auto;
    // margin-bottom: 60px;
    width: 1200px;
    background-color: #fff;
    border: 1px solid #ccc;
    .title {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      border-bottom: 1px solid #ccc;
      p {
        margin-left: 20px;
      }
      span {
        margin-right: 20px;
        color: #969799;
      }
    }
    .box {
      display: flex;
      .left {
        position: static;
        top: 80px;
        width: 399px;
        border-right: 1px solid #dee0e3;
        border-bottom: 1px solid #dee0e3;
        border-radius: 1px solid #ccc;
        max-height: 85vh;
        overflow: hidden;
        -ms-overflow-style: none; /* IE 10+ */
        scrollbar-width: none; /* Firefox */
        overflow-y: scroll;
        h3 {
          padding-left: 30px;
          height: 40px;
          font-size: 13px;
          line-height: 40px;
          background-color: #ccc;
        }
        // /deep/.el-collapse-item__wrap{
        //   height: 360px;
        //   overflow: hidden;
        //   -ms-overflow-style: none; /* IE 10+ */
        //   scrollbar-width: none; /* Firefox */
        //   overflow-y: scroll;
        // }
        .el-checkbox {
          display: flex;
          align-items: center;
          margin: 26px 0 30px 23px;
          margin-left: 20px;
          height: 56px;
          // line-height: 56px;

          // .el-checkbox__label {
          //   display: flex;
          //   align-items: center;
          //   height: 56px;
            img {
              width: 100px;
              height: 56px;
            }
            .jiaoyankekjfl {
              width: 50px;
            }
            .msg {
              display: flex;
              flex-direction: column;
              justify-content: center;
              // margin-bottom: 10px;
              padding: 18px 0;
              padding-left: 10px;
              // width: 210px;
              // height: 34px;
              font-size: 14px;
              p {
                margin-left: 10px;
                width: 230px;
                white-space: pre-wrap;
                // height: 28px;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // background-color: #fff;
                 overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp:2;
                -webkit-box-orient: vertical;
              }
              .choseFile {
                color: #08a579;
              }
            }
          }
          /deep/.el-checkbox__inner::before {
            display: none !important;
          }
        // }
        /deep/.el-collapse-item__header {
          margin-bottom: 3px;
          display: flex;
          justify-content: space-between;
          background-color: #f0f2f5;
          p {
            margin-left: 20px;
            width: 330px;
            color: #333333;
            font-weight: 900;
            user-select: none;
          }
          span {
            color: #969799;
            font-size: 12px;
            user-select: none;
          }
        }
        /deep/.el-collapse-item__content {
          padding-bottom: 0;
        }
        .quanxuan {
          margin: 0;
          margin-left: 20px;
        }
        .srcollBox {
          // max-height: 360px;
          overflow: hidden;
          // -ms-overflow-style: none; /* IE 10+ */
          // scrollbar-width: none; /* Firefox */
          // overflow-y: scroll;
        }
        // ::-webkit-scrollbar {
        //   width: 7px;
        // }
        // ::-webkit-scrollbar-track {
        //   background-color: #f5f5f5;
        //   -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        //   border-radius: 5px;
        // }
        // ::-webkit-scrollbar-thumb {
        //   background-color: rgba(0, 0, 0, 0.2);
        //   border-radius: 5px;
        // }
        // ::-webkit-scrollbar-button {
        //   background-color: #eee;
        //   display: none;
        // }
        // ::-webkit-scrollbar-corner {
        //   background-color: black;
        // }
      }
      ::-webkit-scrollbar {
        width: 3px;
      }
      ::-webkit-scrollbar-track {
        background-color: #f5f5f5;
        -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 5px;
      }
      ::-webkit-scrollbar-button {
        background-color: #eee;
        display: none;
      }
      ::-webkit-scrollbar-corner {
        background-color: black;
      }
      .right {
        margin-right: 0;
        .showRes {
          position: relative;
          width: 800px;
          // height: 450px;
          background-color: #f0f0f5;
          .videoBox {
            margin-top: 10vh;
          }
          video {
            object-fit: fill;
          }
          .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 800px;
            height: 450px;
            background: rgba(0, 0, 0, 0.5);
          }
          span {
            display: inline-block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            line-height: 77px;
            text-align: center;
            font-size: 50px;
            color: #fff;
            // border: 5px solid #ccc;
            border-radius: 100%;
            cursor: pointer;
            img {
              width: 70px;
              height: 70px;
            }
          }
        }
        .showRes:hover {
          span {
            img {
              width: 80px;
              height: 80px;
            }
          }
        }
        .downlond {
          position: fixed;
          bottom: 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 800px;
          height: 60px;
          background: #ffffff;
          border: 1px solid #dee0e3;
          cursor: pointer;
          span {
            margin-left: 20px;
            width: 430px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #646566;
          }
          .downFile {
            margin-right: 20px;
            text-align: center;
            line-height: 40px;
            font-size: 12px;
            color: #fff;
            width: 120px;
            height: 40px;
            background: #08a579;
            border-radius: 4px;
          }
        }
      }
    }
  }
  .guanggao {
    margin: 0 auto;
    width: 1200px;
    height: 160px;
    background: #d3d6de;
    cursor: pointer;
  }
}
</style>
<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #ccc !important;
  background-color: #08a579 !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #08a579 !important;
}
.el-checkbox__inner:hover {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #08a579 !important;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner::before {
  background-color: #fff !important;
  color: #fff !important;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -6px;
  left: -6px;
}
</style>